
<template>
  <div class="trackBox">
    <div class="map" v-loading="loading">
      <div id="groundMap" style="width:100%;height:100%;"></div>
    </div>
  </div>
</template>
<script>
// import BMap from 'BMap'
// import carUrl from '@/assets/images/ground/carIcon/car.png'
// import startUrl from '@/assets/images/ground/carIcon/start.png'
// import endUrl from '@/assets/images/ground/carIcon/end.png'
import $ from 'jquery'
import carUrl from '@/assets/images/ground/carIcon/car.png'
import startUrl from '@/assets/images/ground/carIcon/start.png'
import endUrl from '@/assets/images/ground/carIcon/end.png'
import tjdUrl from '@/assets/images/ground/carIcon/tjd.png'
import {getWayMap} from '@/request/api'
export default {
   props: ['rise','end','searchNumber','startTime','endTime'],
  data () {
    return {
      adds: [],
      index:0,
      mapData:[],
      loading: false,
      rise: this.rise,
      end: this.end,
      searchNumber:this.searchNumber,
      startTime:this.startTime,
      endTime:this.endTime
    }
  },
  mounted () {
    this.initMap()
  },
  methods: {
    // 在运状态
    search_step1(){
      var _this = this
      _this.initMap()
        getWayMap({
            vcln: this.searchNumber,
            btime:this.startTime,
            etime:this.endTime,
        }).then(res=>{
          var dataList = res
          dataList['result'] = res.data
            if(res.data == []){
            _this.$message({
                type: 'error',
                showClose: true,
                message: '暂无轨迹'
              })
         }
          if (res.success == "1") {
            var getMapData = []
            dataList.result.forEach(item => {
              getMapData.push({
                receiveTime: '20190524  13:08:47',
                alertInfomation: '',
                positionDescribe: '',
                positionTime: item.gtm,
                directionOfVehicle: item.agl,
                speed: item.spd,
                latitudeDegree: (item.lat / 600000).toFixed(6),
                longitudeDegree: (item.lon / 600000).toFixed(6),
                vehicleStatus: '0'
              })
            })
            _this.reatMap(getMapData)
         }else{
            _this.$message({
              type: 'error',
              showClose: true,
              message: '数据查询失败'
            })
         }
       
        }) 
    },
    reatMap (pointsArr) {
      var points = []
      var mapData = pointsArr
      for (var i = 0; i < mapData.length; i++) {
        var p1 = mapData[i].latitudeDegree
        var p2 = mapData[i].longitudeDegree
        points.push(new BMap.Point(p2, p1))
      }
      var first = points[0]
      var last = points[points.length - 1]
      window.map.clearOverlays()
      var polyline = new BMap.Polyline(points, {
        enableEditing: false, // 是否启用线编辑，默认为false
        enableClicking: true, // 是否响应点击事件，默认为true
        strokeWeight: '5', // 折线的宽度，以像素为单位
        strokeOpacity: 0.8, // 折线的透明度，取值范围0 - 1
        strokeColor: '#18a45b' // 折线颜色
      })
      window.map.panTo(last)
      window.map.centerAndZoom('', 8)
      window.map.addOverlay(polyline) // 增加折线

      var carIcon = new BMap.Icon(carUrl, new BMap.Size(82,-20)) // 设置车辆图标大小位置
          carIcon.setImageSize(new BMap.Size(50,20));

      var startIcon = new BMap.Icon(startUrl, new BMap.Size(27, 27)) //设置起点图标大小位置
      var endIcon = new BMap.Icon(endUrl, new BMap.Size(27, 27)) // 设置终点图标大小位置 
      var car1 = new BMap.Marker(first, { icon: carIcon }) // 创建车辆标注
      var car2 = new BMap.Marker(last, { icon: carIcon }) // 创建车辆标注
      var start = new BMap.Marker(first, { icon: startIcon }) // 创建起点标注
      var end = new BMap.Marker(last, { icon: endIcon }) // 创建终点标注
      window.map.addOverlay(car1)
      window.map.addOverlay(car2)
      window.map.addOverlay(start)
      window.map.addOverlay(end)
      this.loading = false
    },
    //完成状态
    search_step2 () {
       var _this = this
      _this.initMap()
      _this.adds = []
      _this.mapData = []
      _this.index = 0
      _this.adds.push(_this.rise,_this.end)
       _this.bdGEO()
      // console.log(_this.adds)
      // if(_this.rise != '' || !_this.end != ''){
      //   console.log(222222)
       
      // }else{
      //   console.log(11111)
      //   _this.$message({
      //       message:'查询失败，请稍后重试',
      //       type:'warning'
      //     })
      // }

    },
    initMap () {
      var map = new BMap.Map('groundMap')
      // map.centerAndZoom('武汉', 7)
      map.centerAndZoom(new BMap.Point(108.37, 22.82), 11);
      map.enableScrollWheelZoom(true)
      window.map = map
      this.addMapControl()
    },
    //地图控件
    addMapControl () {
      // eslint-disable-next-line
      var ctrlNav = new BMap.NavigationControl({
        anchor: BMAP_ANCHOR_TOP_LEFT,
        type: BMAP_NAVIGATION_CONTROL_LARGE
      })
      window.map.addControl(ctrlNav) // 向地图中添加缩放控件
      var ctrlSca = new BMap.ScaleControl({ anchor: window.BMAP_ANCHOR_BOTTOM_LEFT })
      window.map.addControl(ctrlSca) // 向地图中添加比例尺控件
    },
    bdGEO(){
      if (this.index < this.adds.length) {
        var add = this.adds[this.index];
        this.getAddrByPoint(add);
        this.index++;
        }
    },
    //批量地址解析成经纬度
    getAddrByPoint(point){
      let that = this
      if(this.index < this.adds.length){
        setTimeout(this.bdGEO,200);
      } 
      var myGeo = new BMap.Geocoder()
      myGeo.getPoint(point, function(res){
        that.mapData.push(res)
        that.creatMap(that.mapData)
      })
    },
    //创建路线
    creatMap (pointsArr) {
      var points = []
      var mapData = pointsArr
      for (var i = 0; i < mapData.length; i++) {
        var p1 = mapData[i].lat
        var p2 = mapData[i].lng
        points.push(new BMap.Point(p2, p1))
      }
      var driving = new BMap.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true}});
          driving.search(points[0], points[1]);

      // var first = points[0]
      // var last = points[points.length - 1]
      // var polyline = new BMap.Polyline(points, {
      //   enableEditing: false, // 是否启用线编辑，默认为false
      //   enableClicking: true, // 是否响应点击事件，默认为true
      //   strokeWeight: '5', // 折线的宽度，以像素为单位
      //   strokeOpacity: 0.8, // 折线的透明度，取值范围0 - 1
      //   strokeColor: '#18a45b' // 折线颜色
      // })
      // window.map.panTo(last)
      // window.map.centerAndZoom('', 8)
      // window.map.addOverlay(polyline) // 增加折线

      // var carIcon = new BMap.Icon(carUrl, new BMap.Size(82, -25))
      // var startIcon = new BMap.Icon(startUrl, new BMap.Size(27, 27))
      // var endIcon = new BMap.Icon(endUrl, new BMap.Size(27, 27))
      // var car1 = new BMap.Marker(first, { icon: carIcon }) // 创建标注
      // var car2 = new BMap.Marker(last, { icon: carIcon }) // 创建标注
      // var start = new BMap.Marker(first, { icon: startIcon }) // 创建标注
      // var end = new BMap.Marker(last, { icon: endIcon }) // 创建标注
      // window.map.addOverlay(car1)
      // window.map.addOverlay(car2)
      // window.map.addOverlay(start)
      // window.map.addOverlay(end)

      this.loading = false
    },

  }
}
</script>
<style lang='scss' scoped>
.searchWrapper {
  position: absolute;
  z-index: 99999999999;
  left: 5%;
  top: 10%;
}
.trackBox {
  width: 100%;
  height: 100%;
}
.map {
  height: 100%;
  z-index: 999 !important;
}
#groundMap {
  z-index: 2 !important;
}
@import "@/assets/css/transportRight.scss";
.searchEara {
  float: left;
}
.search {
  border: none;
}
ul.table {
  overflow: hidden;
  border-bottom: 1px solid #ccc;
}
.table li:first-child {
  border-left: 1px solid #ccc;
}
ul.table li {
  float: left;
  width: 25%;
  font-size: 1.4rem;
  border-right: 1px solid #ccc;
  line-height: 40px;
  height: 40px;
  text-align: center;
}
.table1 {
  background-color: #434343;
  color: #fff;
  margin-bottom: none;
}
</style>
